<template>
  <el-row class="my-layout-container">
    <el-col :span="3">
      <BaseSide />
    </el-col>
    <el-col :span="21">
      <div class="my-layout-right">
        <BaseHeader />
        <div class="my-page-container">
          <router-view />
        </div>
        <div class="my-layout-footer">
          Copyright ©2025 前端模板
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<style lang="scss">
.my-layout-container {
  height: 100vh;
  overflow: hidden;
  .my-layout-right {
    --ep-menu-horizontal-height: 50px;
    .my-page-container {
      height: calc(100vh - var(--ep-menu-horizontal-height) - 2.8rem);
      padding: 0.2rem 0.6rem 0 0.6rem;
      overflow: hidden;
      background-color: var(--ep-bg-color-page);
    }
    .my-layout-footer {
      background-color: var(--ep-bg-color-page);
      font-size: 0.6rem;
      line-height: 1rem;
      color: var(--ep-text-color-secondary);
    }
  }
}
</style>
